<template>
	<view class="page flex-col">
		<image @click="listenerActionSheet" class="shareImg" src="../../static/com/icon_fx.png" mode=""></image>
		<view class="group_1">
			<!-- <view class="box_1 flex-col">
       
	  </view> -->
			<view class="box_7 flex-col" style="line-height: 100rpx;">
				<swiper class="swiper" :indicator-dots="false" indicator-active-color="#fff" :circular="true"
					:autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in dataInfo.sliderImage" :key="index">
						<view class="swiper-item" style="padding: 0 20rpx;">
							<image style="width: 100%;" :src="item" mode=""></image>
						</view>
					</swiper-item>

				</swiper>
			</view>
			<view class="box_8 flex-col">
				<view class="box_9 flex-row ">
					<view class="text-wrapper_1 flex-col">
						最热
						<!-- <text class="text_8"></text> -->
					</view>
					<text class="text_10">{{dataInfo.activityName}}</text>
				</view>
				<view class="text-wrapper_2 flex-row justify-between">
					<text class="text_11">¥</text>
					<text class="text_12">{{dataInfo.price}}</text>
				</view>
				<view class="box_10 flex-row" v-if="d!=0&&h!=0&&m!=0&&s!=0">


					<view class="text-wrapper_6 flex-row">
						<text class="text_17">报名倒计时</text>

						<text class="text_18"> <text
								class="text_13">还剩{{d||0}}天</text>{{h||0}}小时{{m||0}}分{{s||0}}秒</text>

					</view>
				</view>

				<view class="box_12 flex-col">

					<view class="section_4 flex-row justify-between">
						<view class="image-text_2 flex-row ">
							<image class="label_4" src="@/static/pagesA/icon_hdsj.png" mode="scaleToFill"></image>
							<view class="text-group_2 flex-col justify-between">
								<view class="text_22">活动时间:</view>

								<view class="text_23">
									{{dataInfo.startTime}}-{{dataInfo.endTime}}
								</view>
							</view>
						</view>
						<!-- <image class="label_5" referrerpolicy="no-referrer"
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/831293efddf34ccaa17950d4081b67e7_mergeImage.png" /> -->
					</view>
				</view>
				<view class="box_12 flex-col">

					<view class="section_4 flex-row justify-between">
						<view class="image-text_2 flex-row ">
							<image class="label_4" src="@/static/pagesA/icon_hddz.png" mode="scaleToFill"></image>
							<view class="text-group_2 flex-col justify-between">
								<view class="text_22">活动地址:</view>
								<view class="text_23">{{dataInfo.address}}</view>
							</view>
						</view>
						<image class="label_5" referrerpolicy="no-referrer" @click="openlocation()"
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/831293efddf34ccaa17950d4081b67e7_mergeImage.png" />
					</view>
				</view>

				<view class="box_12 flex-col">

					<view class="section_4 flex-row justify-between">
						<view class="image-text_2 flex-row ">
							<image class="label_4" src="@/static/pagesA/icon_zbf.png" mode="scaleToFill"></image>
							<view class="text-group_2 flex-col justify-between">
								<view class="text_22">主办方:</view>
								<view class="text_23">{{dataInfo.sponsor}}</view>
							</view>
						</view>
						<!-- <image class="label_5" referrerpolicy="no-referrer"
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/831293efddf34ccaa17950d4081b67e7_mergeImage.png" /> -->
					</view>
				</view>
				<view class="box_12 flex-col">

					<view class="section_4 flex-row justify-between">
						<view class="image-text_2 flex-row ">
							<image class="label_4" src="@/static/com/icon_lxfs.png" mode="scaleToFill"></image>

							<view class="text-group_2 flex-col justify-between">
								<view class="text_22">联系方式:</view>
								<view class="text_23">{{dataInfo.sponsorPhone}}</view>
							</view>
						</view>
						<!-- <image class="label_5" referrerpolicy="no-referrer"
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/831293efddf34ccaa17950d4081b67e7_mergeImage.png" /> -->
					</view>
				</view>
				<view class="box_16 flex-col">
					<uni-collapse @change="openCollapse">
						<!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
						<uni-collapse-item title-border="none" :border="false">
							<template v-slot:title>
								<view class="" style="display:flex;flex-direction: row;    align-items: center;">
									<view class="image-wrapper_2 flex-row justify-between" v-if="hideHead">
										<headD :headList="dataInfo.images"></headD>
									</view>
									<view class="box_18 flex-row">
										<text class="text_28">已报名:</text>
										<text class="text_29">{{dataInfo.users}}/</text>
										<text class="text_30">{{dataInfo.stock}}</text>

									</view>

								</view>

							</template>
							<view class="content">
								<headD :headList="dataInfo.images"></headD>
							</view>
						</uni-collapse-item>
					</uni-collapse>

				</view>
				<view class="text_31">活动详情</view>

				<view class="box_21 flex-col">
					<jyf-parser :html="dataInfo.activityInfo" ref="article" :tag-style="tagStyle"></jyf-parser>

				</view>
				<view class="" style="height: 100rpx;">

				</view>
				<!-- {{d||0}}天</text>{{h||0}}小时{{m||0}}分{{s||0}} -->
				<view class="box_22 flex-col" v-if="d!=0&&h!=0&&m!=0&&s!=0">
					<view class="text-wrapper_7 ing flex-col" @click="goPage()">
						<text class="text_32">立即报名</text>
					</view>
				</view>
				<view class="box_22 flex-col" v-else>
					<view class="text-wrapper_7 over flex-col">
						<text class="text_32">已结束</text>
					</view>
				</view>

			</view>
		</view>
		
		<uni-popup ref="safeguardPup" type="bottom">
		
			<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
			
				<button class="item" open-type="share" hover-class='none' @click="goFriend">
					<view class="iconfont icon-weixin3"></view>
					<view class="">发送给朋友</view>
				</button>
			
				<button class="item" hover-class='none' @tap="sharePoster">
					<view class="iconfont icon-haibao"></view>
					<view class="">生成海报</view>
				</button>
			</view>
		</uni-popup>
		<qrcode-poster @saveImgeOK="saveImgeOK" ref="poster" :title="dataInfo.name" des=" " :headerImg="dataInfo.sliderImage[0]" :subTitle='"￥"+dataInfo.price'></qrcode-poster>
			
		<home></home>
	</view>
</template>

<script>
	import QrcodePoster from '@/components/com/poster.vue'
	import home from '@/components/home/index.vue'
	import moment from 'moment'
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		getActivityDetail,
		getActivityPreOrder
	} from '@/api/togeterRich/index.js'
	import headD from '@/components/com/headD.vue'
	export default {

		components: {
			home,
			headD,
			"jyf-parser": parser,
			QrcodePoster,
		},
		data() {
			return {
				
				d: '',
				h: '',
				m: '',
				s: '',
				sum_h: '',
				id: '',
				dataInfo: {},
				hideHead: true,
				headList: [],
				constants: {},
				timer: '',
				posters:false,
			};
		},
		onLoad(e) {
			this.id = e.id
			this.init()


		},
		onShow() {
			this.countTime()
		},
		onUnload() {

			clearTimeout(this.timer)
		},
		methods: {
			saveImgeOK(){
				this.$refs.safeguardPup.close()
				// this.posters = false;
			},
			sharePoster() {
				//获取带参数二维码并传递
				this.is_show_model = false
				this.$refs.poster.showCanvas()
			},
			listenerActionSheet: function() {
				if (this.isLogin === false) {
					toLogin();
				} else {
					// #ifdef H5
					if (!this.imgTop) this.getImageBase64(this.storeImage);
					if (this.$wechat.isWeixin() === true) {
						this.weixinStatus = true;
					}
					// #endif
					this.$refs.safeguardPup.open()
					// this.posters = true;
			
				}
			},
			//倒计时
			countTime: function() {
				// 定义结束时间戳
				const end = Date.parse(new Date(this.dataInfo.saleEndTime))
				// 定义当前时间戳
				const now = Date.parse(new Date())
				// 做判断当倒计时结束时都为0
				if (now >= end) {
					this.d = 0
					this.h = 0
					this.m = 0
					this.s = 0
					return
				}
				// 用结束时间减去当前时间获得倒计时时间戳
				const msec = end - now
				let d = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
				let h = parseInt(msec / 1000 / 60 / 60 % 24) //算出小时数
				let m = parseInt(msec / 1000 / 60 % 60) //算出分钟数
				let s = parseInt(msec / 1000 % 60) //算出秒数
				//给数据赋值
				this.d = d
				this.h = h > 9 ? h : '0' + h
				this.m = m > 9 ? m : '0' + m
				this.s = s > 9 ? s : '0' + s
				//定义this指向
				const that = this
				// 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
				this.timer = setTimeout(function() {
					that.countTime()
				}, 1000)
			},
			init() {
				getActivityDetail(this.id).then(res => {
					this.dataInfo = res.data
				})
			},
			openlocation() {
				let that = this
				uni.openLocation({
					latitude: Number(that.dataInfo.latitude),
					longitude: Number(that.dataInfo.longitude),
					name: '目标位置',
					address: that.dataInfo.address,
					success: function() {
						console.log('打开地图导航成功');
					},
					fail: function(err) {
						console.log('打开地图导航失败', err);
					}
				});
			},
			openCollapse(e) {
				if (e && e[0] == 0) {
					this.hideHead = false
				} else {
					this.hideHead = true
				}

			},
			goPage(url) {
				let data = {
					productId: this.id,
					productNum: 1
				}
				getActivityPreOrder(data).then(res => {
					console.log(res, 'jujjj')
					uni.navigateTo({
						url: `/pagesA/childStudy/pay?id=${this.id}&&preOrderNo=${res.data.preOrderNo}`
					})
					clearTimeout(this.timer)
				})
				// 

			}
		},
	};
</script>
<style lang="scss" scoped>
	@import 'com/info.css';
	@import '@/com/css/common.css';
.generate-posters {
	    background: #fff;
	    text-align: center;
	    justify-content: space-around;
	    padding: 20rpx;
	}

	.generate-posters.on {
		transform: translate3d(0, 0, 0);
	}

	.generate-posters .item {
		// flex: 50%;
		// text-align: center;
		font-size: 30rpx;
	}

	.generate-posters .item .iconfont {
		font-size: 80rpx;
		color: #5eae72;
	}

	.generate-posters .item .iconfont.icon-haibao {
		color: #5391f1;
	}

	.swiper {
		width: 100%;
		height: 100%;

	}
</style>